// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
import QtQuick 1.1

Item {
    id: _root
    width: 20
    height: 100

    property int max: 4
    property int min: 0
    property int value: 0

    property color guideColor: Qt.rgba(1,1,1,1)
    property color handleColor: Qt.rgba(1,1,1,1)
    property real radius: 0

    Component.onCompleted: {
        setHandlePosition();
    }

    onValueChanged: {
        setHandlePosition();
    }

    function setHandlePosition(){
        _handle.y = _guide.height - _guide.height * _root.value / _root.max
                - _handle.height * 0.5 + _guide.y;
    }

    //ガイド
    Rectangle{
        id: _guide
        anchors.centerIn: parent
        width: parent.width * 0.5
        height: parent.height * 0.9
        border.color: _root.guideColor
        border.width: 1
        radius: _root.radius
        color: "#00000000"
    }

    //つかむところ
    Rectangle{
        id: _handle
        anchors.horizontalCenter: parent.horizontalCenter
        y: 0
        width: parent.width * 0.9
        height: 10
        color: "#222222"
        border.width: 1
        border.color: _root.handleColor
        radius: _root.radius
    }
    MouseArea{
        property int temp: 0
        anchors.fill: parent
        onMousePositionChanged: {
            temp = _root.max - _root.max * mouse.y / _root.height;
            if(temp > max){
                temp = max;
            }else if(temp < min){
                temp = min;
            }
            _root.value = temp;
        }
    }
}
